<template>
  <div class="proxy container">
    <!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->
    <div class="list-container" v-if="userInfo">
      <div class="list-item" :class="{ higher: item.isHigher }" v-for="(item, index) in proxyList">
        <img class="head-url" :src="item.headUrl ? item.headUrl : defaultHead" />
        <div>
          <div class="name">{{ item.promoterName ? item.promoterName : '代理人' + index }}</div>
          <a :href="'tel:' + item.telephone" class="tel">联系电话：{{ item.telephone }}</a>
        </div>
      </div>
    </div>
    <van-empty description="没有相关代理人" v-else-if="proxyList.length > 0">
    </van-empty>
    <van-empty description="请登录，体验完整功能" v-else>
      <van-button round type="primary" class="bottom-button" @click="goLogin">登 录</van-button>
    </van-empty>
  </div>
</template>
<script lang="ts">
// @ts-nocheck
import { ref, watch } from "vue";
import { requireImg } from "@/assets/imgUrl";
import { showConfirmDialog } from 'vant';
import { useRouter } from "vue-router";

//在setup中
export default {
  name: "App",
  setup() {
    const value = ref('');
    const router = useRouter();
    let proxyList1 = window.userInfo && window.userInfo.higherUserInfo ? window.userInfo.higherUserInfo : [];
    proxyList1.map(item => {
      item.isHigher = true;
    })
    let proxyList2 = window.userInfo && window.userInfo.lowerUserInfoList ? window.userInfo.lowerUserInfoList : [];
    const proxyList = proxyList1.concat(proxyList2);
    const defaultHead = requireImg('personal-center/head.png');
    const userInfo = window.userInfo && window.userInfo.userInfo

    const goLogin = () => {
      router.push({ path: '/login' })
    }
    return {
      value,
      proxyList,
      defaultHead,
      userInfo,
      goLogin
    };
  },

  mounted() {
    console.log('this.proxyList', this.proxyList.length)
  },
  methods: {
    bindWechat() {
      if (this.userInfo) {
        console.log('openid == ', window.openId)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.proxy {
  .list-container {
    margin-top: 10px;

    .list-item {
      display: flex;
      background: #FFFFFF;
      padding: 10px 5px;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px -2px 8px -2px rgba(0, 0, 0, 0.05);
      align-items: center;
      border-radius: 12px;

      .head-url {
        height: 30px;
        margin-right: 10px;
      }

      .name {
        font-size: 14px;
        font-weight: 500;
      }

      .tel {
        font-size: 12px;
      }
    }

    .higher {
      border: 1px solid blue;
    }
  }
}
</style>